<script setup lang="ts">
// 附件列表组件
import { computed } from 'vue'

// 附件项接口定义
export interface AttachmentItem {
  // 附件ID
  id?: string | number
  // 附件名称
  name: string
  // 附件URL
  url: string
  // 附件类型（image/pdf等）
  type?: string
  // 附件大小（字节）
  size?: number
  // 附件描述
  description?: string
  // 缩略图URL（可选）
  thumbnailUrl?: string
}

// Props定义
interface Props {
  // 附件列表
  attachments: AttachmentItem[]
  // 是否显示文件大小
  showSize?: boolean
  // 是否显示下载按钮
  showDownload?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showSize: true,
  showDownload: true,
})

// Emits定义
const emit = defineEmits<{
  (e: 'preview', item: AttachmentItem, index: number): void
  (e: 'download', item: AttachmentItem): void
  (e: 'delete', item: AttachmentItem): void
}>()

// 删除附件
function deleteAttachment(item: AttachmentItem) {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除附件"${item.name}"吗？`,
    success: (res) => {
      if (res.confirm) {
        emit('delete', item)
      }
    },
  })
}
</script>

<template>
  <view class="attachment-list">
    <AttachmentItem
      v-for="(item, index) in attachments"
      :key="item.id || item.name + index"
      :file="item"
      @delete="deleteAttachment"
    />

    <!-- 空状态 -->
    <view v-if="attachments.length === 0" class="attachment-empty" style="text-align: center; padding: 20px; color: #999; font-size: 14px;">
      暂无附件
    </view>
  </view>
</template>

<style lang="scss" scoped>
.attachment-list {
  width: 100%;
}
</style>
